<template>
	<div class="loading" v-show="show">
		<div class="load-outer">
			<img class="loadImg" src="../../assets/img/loading.gif"></img>
		</div>
	</div>
</template>
<script>
	export default{
		data(){
			return{
				show: false
			}
		},
		watch:{
			show(val){
				if(val){
					// document.body.classList.add('condition-dialog-open')
				}else{
					// document.body.classList.remove('condition-dialog-open')
				}
			}
		}
	}
</script>
<style scoped lang="less">
	.condition-dialog-open{
		position: fixed;
        width: 100%;
	}
	.loading{
		width: 100%;
	    height: 100%;
	    position: fixed;
	    top: 0;
	    left: 0;
	    background: rgba(0,0,0,.6);
	    z-index: 1001;
	    .load-outer{
    	    width: 1rem;
			height: 1rem;
			padding: 0.18rem;
			background: #000;
			border-radius: 8px;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%,-50%);
			box-sizing: border-box;
	    }
		.loadImg{
			width: 0.64rem; 
			vertical-align: middle;
			text-align: center;
		}
	}
	
</style>